<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>Psuedo scoped styling</title>
  <script src="../../../platform.js" shadow></script>
  <script src="register.js"></script>
  <script src="../../../tools/test/htmltest.js"></script>
  <script src="../../../node_modules/chai/chai.js"></script>
</head>
<body>
  <x-foo>
    <div>Green?</div>
  </x-foo>
 
  <template id="x-foo"">
    <style>
      @host {
        * {
          display: block;
          border: 1px solid black;
        }
      }

      /*@polyfill @host > div */
      ::-webkit-distributed(*) {
        background: green;
      }

      /*@polyfill @host > div */
      ::-webkit-distributed(*) {
        color: red;
      }

    </style>
    <content></content>
  </template>
  
  <script>
    XFoo = register('x-foo', '', HTMLElement.prototype, ['x-foo']);
    
    document.addEventListener('WebComponentsReady', function() {
      setTimeout(function() {
        var foo = document.querySelector('x-foo');
        fooDiv = foo.firstElementChild;
        chai.assert.equal(getComputedStyle(fooDiv).backgroundColor, 
          'rgb(0, 128, 0)', '@polyfill styles are applied');
        chai.assert.equal(getComputedStyle(fooDiv).color, 
          'rgb(255, 0, 0)', '@polyfill styles are applied');
        done();
      });
    });
  </script>
  
  
</body>
</html>
